<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Mednalytics</title>
    <!-- Iconic Fonts -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="vendors/iconic-fonts/font-awesome/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="vendors/iconic-fonts/flat-icons/flaticon.css">
    <link rel="stylesheet" href="vendors/iconic-fonts/cryptocoins/cryptocoins.css">
    <link rel="stylesheet" href="vendors/iconic-fonts/cryptocoins/cryptocoins-colors.css">
    <!-- Bootstrap core CSS -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery UI -->
    <link href="assets/css/jquery-ui.min.css" rel="stylesheet">
    <!-- Page Specific CSS (Slick Slider.css) -->
    <link href="assets/css/slick.css" rel="stylesheet">
    <!-- mednalytics styles -->
    <link href="assets/css/style.css" rel="stylesheet">

    <!-- Page Specific CSS (Morris Charts.css) -->
    <link href="assets/css/morris.css" rel="stylesheet">
    <!-- Favicon -->
    <link rel="icon" type="image/png" sizes="32x32" href="favicon.ico">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body class="ms-body ms-aside-left-open ms-primary-theme ms-has-quickbar">
<!-- Setting Panel -->
<div class='ms-toggler ms-settings-toggle ms-d-block-lg'>
    <i class='flaticon-gear'></i>
</div>
<div class='ms-settings-panel ms-d-block-lg'>
    <div class='row'>
        <div class='col-xl-4 col-md-4'>
            <h4 class='section-title'>自定义</h4>
            <div>
                <label class='ms-switch'>
                    <input type='checkbox' id='dark-mode'>
                    <span class='ms-switch-slider round'></span>
                </label>
                <span> 黑夜模式 </span>
            </div>

        </div>
        <div class='col-xl-4 col-md-4'>
            <h4 class='section-title'>键盘快捷键</h4>
            <p class='ms-directions mb-0'><code>Esc</code> 关闭快速栏</p>
            <p class='ms-directions mb-0'><code>Alt + (1 -> 6)</code> 打开快速栏标签</p>
            <p class='ms-directions mb-0'><code>Alt + Q</code> 启用快速栏配置模式</p>
        </div>
    </div>
</div>
<!-- Preloader -->
<div id='preloader-wrap'>
    <div class='spinner spinner-8'>
        <div class='ms-circle1 ms-child'></div>
        <div class='ms-circle2 ms-child'></div>
        <div class='ms-circle3 ms-child'></div>
        <div class='ms-circle4 ms-child'></div>
        <div class='ms-circle5 ms-child'></div>
        <div class='ms-circle6 ms-child'></div>
        <div class='ms-circle7 ms-child'></div>
        <div class='ms-circle8 ms-child'></div>
        <div class='ms-circle9 ms-child'></div>
        <div class='ms-circle10 ms-child'></div>
        <div class='ms-circle11 ms-child'></div>
        <div class='ms-circle12 ms-child'></div>
    </div>
</div>
<!-- Overlays -->
<div class='ms-aside-overlay ms-overlay-left ms-toggler' data-target='#ms-side-nav' data-toggle='slideLeft'></div>
<div class='ms-aside-overlay ms-overlay-right ms-toggler' data-target='#ms-recent-activity'
     data-toggle='slideRight'></div>
<!-- Sidebar Navigation Left -->
<aside id='ms-side-nav' class='side-nav fixed ms-aside-scrollable ms-aside-left'>
    <!-- Logo -->
    <div class='logo-sn ms-d-block-lg'>
        <a class='pl-0 ml-0 text-center' href='index.html'> <img src='assets/img/mednalytics-logo-216x62.png'
                                                                 alt='logo'> </a>
        <a href='#' class='text-center ms-logo-img-link'> <img src='assets/img/dashboard/doctor-3.jpg' alt='logo'></a>
        <h5 class='text-center text-white mt-2'>塞缪尔博士</h5>
        <h6 class='text-center text-white mb-3'>管理员</h6>
    </div>
    <!-- Navigation -->
    <ul class='accordion ms-main-aside fs-14' id='side-nav-accordion'>
        <!-- Dashboard -->
        <li class='menu-item'>
            <a href='#' class='has-chevron' data-toggle='collapse' data-target='#dashboard' aria-expanded='false'
               aria-controls='dashboard'>
                <span><i class='material-icons fs-16'>dashboard</i>首页 </span>
            </a>
            <ul id='dashboard' class='collapse' aria-labelledby='dashboard' data-parent='#side-nav-accordion'>
                <li><a href='index.html'>医学分析</a></li>
            </ul>
        </li>
        <!-- /Dashboard -->
        <!-- Doctor -->
        <li class='menu-item'>
            <a href='#' class='has-chevron' data-toggle='collapse' data-target='#doctor' aria-expanded='false'
               aria-controls='doctor'>
                <span><i class='fas fa-stethoscope'></i>医生</span>
            </a>
            <ul id='doctor' class='collapse' aria-labelledby='doctor' data-parent='#side-nav-accordion'>
                <li><a href='pages/doctor/add-doctor.html'>添加医生</a></li>
                <li><a href='pages/doctor/doctor-list.html'>医生列表</a></li>
            </ul>
        </li>
        <!-- Doctor -->
        <!-- Patient -->
        <li class='menu-item'>
            <a href='#' class='has-chevron' data-toggle='collapse' data-target='#patient' aria-expanded='false'
               aria-controls='patient'>
                <span><i class='fas fa-user'></i>病人</span>
            </a>
            <ul id='patient' class='collapse' aria-labelledby='patient' data-parent='#side-nav-accordion'>
                <li><a href='pages/patient/add-patient.html'>添加病人</a></li>
                <li><a href='pages/patient/patient-list.html'>病人列表</a></li>
            </ul>
        </li>
        <!-- /Patient -->
        <!-- Department -->
        <li class='menu-item'>
            <a href='#' class='has-chevron' data-toggle='collapse' data-target='#department' aria-expanded='false'
               aria-controls='department'>
                <span><i class='fas fa-sitemap'></i>部门</span>
            </a>
            <ul id='department' class='collapse' aria-labelledby='department' data-parent='#side-nav-accordion'>
                <li><a href='pages/department/add-department.html'>添加部门</a></li>
                <li><a href='pages/department/department-list.html'>部门列表</a></li>
            </ul>
        </li>
        <!-- /Department -->
        <!-- Schedule -->
        <!-- /Schedule -->
        <!-- Appointment -->
        <li class='menu-item'>
            <a href='#' class='has-chevron' data-toggle='collapse' data-target='#appointment' aria-expanded='false'
               aria-controls='appointment'>
                <span><i class='far fa-check-square'></i>预约</span>
            </a>
            <ul id='appointment' class='collapse' aria-labelledby='appointment' data-parent='#side-nav-accordion'>
                <li><a href='pages/appointment/add-appointment.html'>添加预约</a></li>
                <li><a href='pages/appointment/appointment-list.html'>预约列表</a></li>
            </ul>
        </li>
        <!-- /Appointment -->

        <!-- Report -->
        <li class='menu-item'>
            <a href='#' class='has-chevron' data-toggle='collapse' data-target='#report' aria-expanded='false'
               aria-controls='report'>
                <span><i class='fas fa-file-alt'></i>处方</span>
            </a>
            <ul id='report' class='collapse' aria-labelledby='report' data-parent='#side-nav-accordion'>
                <li><a href='pages/report/patient-report.html'>开处方</a></li>
                <li><a href='pages/report/doctor-report.html'>处方列表</a></li>

            </ul>
        </li>
        <!-- /Report -->
        <!-- Human Resource -->

        <!-- /Human Resource -->
        <!-- Bed -->

        <!-- /Bed-->
        <!-- Notice -->

        <!-- /Notice -->
    </ul>
</aside>
<!-- Sidebar Right -->
<aside id='ms-recent-activity' class='side-nav fixed ms-aside-right ms-scrollable'>
    <div class='ms-aside-header'>
        <ul class='nav nav-tabs tabs-bordered d-flex nav-justified mb-3' role='tablist'>
            <li role='presentation' class='fs-12'><a href='#activityLog' aria-controls='activityLog' class='active'
                                                     role='tab' data-toggle='tab'> Activity Log</a></li>
            <li role='presentation' class='fs-12'><a href='#recentPosts' aria-controls='recentPosts' role='tab'
                                                     data-toggle='tab'> Settings </a></li>
            <li>
                <button type='button' class='close ms-toggler text-center' data-target='#ms-recent-activity'
                        data-toggle='slideRight'><span aria-hidden='true'>&times;</span></button>
            </li>
        </ul>
    </div>
    <div class='ms-aside-body'>
        <div class='tab-content'>
            <div role='tabpanel' class='tab-pane active fade show' id='activityLog'>
                <ul class='ms-activity-log'>
                    <li>
                        <div class='ms-btn-icon btn-pill icon btn-light'>
                            <i class='flaticon-gear'></i>
                        </div>
                        <h6>数据 1.0.0 更新</h6>
                        <span> <i class='material-icons'>事件</i>2019年1月1日</span>
                        <p class='fs-14'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque
                            diam non nisi semper, ula in sodales vehicula....</p>
                    </li>
                    <li>
                        <div class='ms-btn-icon btn-pill icon btn-success'>
                            <i class='flaticon-tick-inside-circle'></i>
                        </div>
                        <h6>配置文件已更新</h6>
                        <span> <i class='material-icons'>事件</i>2018年3月4日</span>
                        <p class='fs-14'>Curabitur purus sem, malesuada eu luctus eget, suscipit sed turpis. Nam
                            pellentesque felis vitae justo accumsan, sed semper nisi sollicitudin...</p>
                    </li>
                    <li>
                        <div class='ms-btn-icon btn-pill icon btn-warning'>
                            <i class='flaticon-alert-1'></i>
                        </div>
                        <h6>你的付款到期了</h6>
                        <span> <i class='material-icons'>事件</i>2019年1月1日</span>
                        <p class='fs-14'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque
                            diam non nisi semper, ula in sodales vehicula....</p>
                    </li>
                    <li>
                        <div class='ms-btn-icon btn-pill icon btn-danger'>
                            <i class='flaticon-alert'></i>
                        </div>
                        <h6>数据库错误</h6>
                        <span> <i class='material-icons'>事件</i>2018年3月4日</span>
                        <p class='fs-14'>Curabitur purus sem, malesuada eu luctus eget, suscipit sed turpis. Nam
                            pellentesque felis vitae justo accumsan, sed semper nisi sollicitudin...</p>
                    </li>
                    <li>
                        <div class='ms-btn-icon btn-pill icon btn-info'>
                            <i class='flaticon-information'></i>
                        </div>
                        <h6>查看趋势</h6>
                        <span> <i class='material-icons'>事件</i>2019年1月1日</span>
                        <p class='fs-14'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque
                            diam non nisi semper, ula in sodales vehicula....</p>
                    </li>
                    <li>
                        <div class='ms-btn-icon btn-pill icon btn-secondary'>
                            <i class='flaticon-diamond'></i>
                        </div>
                        <h6>你的仪表盘准备好了</h6>
                        <span> <i class='material-icons'>事件</i>2018年3月4日</span>
                        <p class='fs-14'>Curabitur purus sem, malesuada eu luctus eget, suscipit sed turpis. Nam
                            pellentesque felis vitae justo accumsan, sed semper nisi sollicitudin...</p>
                    </li>
                </ul>
                <a href='#' class='btn btn-primary d-block'> 查看全部 </a>
            </div>
            <div role='tabpanel' class='tab-pane fade' id='recentPosts'>
                <h6>常规设置</h6>
                <div class='ms-form-group'>
                    <span class='ms-option-name fs-14'>位置查询</span>
                    <label class='ms-switch float-right'>
                        <input type='checkbox'>
                        <span class='ms-switch-slider round'></span>
                    </label>
                </div>
                <div class='ms-form-group'>
                    <span class='ms-option-name fs-14'>允许的通知</span>
                    <label class='ms-switch float-right'>
                        <input type='checkbox'>
                        <span class='ms-switch-slider round'></span>
                    </label>
                </div>
                <div class='ms-form-group'>
                    <span class='ms-option-name fs-14'>允许弹出窗口</span>
                    <label class='ms-switch float-right'>
                        <input type='checkbox' checked>
                        <span class='ms-switch-slider round'></span>
                    </label>
                </div>
                <h6>Log Settings</h6>
                <div class='ms-form-group'>
                    <span class='ms-option-name fs-14'>启用日志记录</span>
                    <label class='ms-switch float-right'>
                        <input type='checkbox' checked>
                        <span class='ms-switch-slider round'></span>
                    </label>
                </div>
                <div class='ms-form-group'>
                    <span class='ms-option-name fs-14'>审核日志</span>
                    <label class='ms-switch float-right'>
                        <input type='checkbox'>
                        <span class='ms-switch-slider round'></span>
                    </label>
                </div>
                <div class='ms-form-group'>
                    <span class='ms-option-name fs-14'></span>
                    <label class='ms-switch float-right'>
                        <input type='checkbox' checked>
                        <span class='ms-switch-slider round'>错误日志</span>
                    </label>
                </div>
                <h6>高级设置</h6>
                <div class='ms-form-group'>
                    <span class='ms-option-name fs-14'>启用日志记录</span>
                    <label class='ms-switch float-right'>
                        <input type='checkbox' checked>
                        <span class='ms-switch-slider round'></span>
                    </label>
                </div>
                <div class='ms-form-group'>
                    <span class='ms-option-name fs-14'>审核日志</span>
                    <label class='ms-switch float-right'>
                        <input type='checkbox'>
                        <span class='ms-switch-slider round'></span>
                    </label>
                </div>
                <div class='ms-form-group'>
                    <span class='ms-option-name fs-14'>错误日志</span>
                    <label class='ms-switch float-right'>
                        <input type='checkbox' checked>
                        <span class='ms-switch-slider round'></span>
                    </label>
                </div>
            </div>
        </div>
    </div>
</aside>
<!-- Main Content -->
<main  id='index' class='body-content'>
    <!-- Navigation Bar -->
    <nav class='navbar ms-navbar'>
        <div class='ms-aside-toggler ms-toggler pl-0' data-target='#ms-side-nav' data-toggle='slideLeft'>
            <span class='ms-toggler-bar bg-white'></span>
            <span class='ms-toggler-bar bg-white'></span>
            <span class='ms-toggler-bar bg-white'></span>
        </div>
        <div class='logo-sn logo-sm ms-d-block-sm'>
            <a class='pl-0 ml-0 text-center navbar-brand mr-0' href='index.html'><img
                    src='assets/img/mednalytics-logo-84x41.png' alt='logo'> </a>
        </div>
        <ul class='ms-nav-list ms-inline mb-0' id='ms-nav-options'>

            <li class='ms-nav-item  ms-d-none'>
                <a href='/pages/appointment/add-appointment.html' class='text-white'><i
                        class='flaticon-spreadsheet mr-2'></i>预约</a>
            </li>

            <li class='ms-nav-item ms-d-none'>
                <a href='#prescription' class='text-white' data-toggle='modal'><i
                        class='flaticon-pencil mr-2'></i>开药方</a>
            </li>

            <li class='ms-nav-item ms-d-none'>
                <a href='#report1' class='text-white' data-toggle='modal'><i class='flaticon-list mr-2'></i>生成报告</a>
            </li>

            <li class='ms-nav-item dropdown'>
                <a href='#' class='text-disabled ms-has-notification' id='notificationDropdown' data-toggle='dropdown'
                   aria-haspopup='true' aria-expanded='false'><i class='flaticon-bell'></i></a>
                <ul class='dropdown-menu dropdown-menu-right' aria-labelledby='notificationDropdown'>
                    <li class='dropdown-menu-header'>
                        <h6 class='dropdown-header ms-inline m-0'><span class='text-disabled'>通知</span></h6>
                        <span class='badge badge-pill badge-info'>4个新的消息</span>
                    </li>
                    <li class='dropdown-divider'></li>
                    <li class='ms-scrollable ms-dropdown-list'>
                        <a class='media p-2' href='#'>
                            <div class='media-body'>
                                <span>12种方法来改善您的加密仪表板</span>
                                <p class='fs-10 my-1 text-disabled'><i class='material-icons'>访问时间</i> 30秒前</p>
                            </div>
                        </a>
                        <a class='media p-2' href='#'>
                            <div class='media-body'>
                                <span>有新注册的用户</span>
                                <p class='fs-10 my-1 text-disabled'><i class='material-icons'>访问时间</i> 45分钟前</p>
                            </div>
                        </a>
                        <a class='media p-2' href='#'>
                            <div class='media-body'>
                                <span>你的账户是从未经授权的IP上登录的</span>
                                <p class='fs-10 my-1 text-disabled'><i class='material-icons'>访问时间</i> 2小时前</p>
                            </div>
                        </a>
                        <a class='media p-2' href='#'>
                            <div class='media-body'>
                                <span>已提交申请表格</span>
                                <p class='fs-10 my-1 text-disabled'><i class='material-icons'>访问时间</i> 1天前</p>
                            </div>
                        </a>
                    </li>
                    <li class='dropdown-divider'></li>
                    <li class='dropdown-menu-footer text-center'>
                        <a href='#'>查看所有通知</a>
                    </li>
                </ul>
            </li>
            <li class='ms-nav-item ms-nav-user dropdown'>
                <a href='#' id='userDropdown' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'> <img
                        class='ms-user-img ms-img-round float-right' src='assets/img/dashboard/doctor-3.jpg'
                        alt='people'> </a>
                <ul class='dropdown-menu dropdown-menu-right user-dropdown' aria-labelledby='userDropdown'>
                    <li class='dropdown-menu-header'>
                        <h6 class='dropdown-header ms-inline m-0'><span class='text-disabled'>欢迎塞缪尔·迪欧博士</span></h6>
                    </li>
                    <li class='dropdown-divider'></li>
                    <li class='ms-dropdown-list'>
                        <a class='media fs-14 p-2' href='../prebuilt-pages/user-profile.html'> <span><i
                                class='flaticon-user mr-2'></i> 简况</span> </a>
                        <a class='media fs-14 p-2' href='../apps/email.html'> <span><i class='flaticon-mail mr-2'></i> 收件箱</span>
                            <span class='badge badge-pill badge-info'>3</span> </a>
                        <a class='media fs-14 p-2' href='../prebuilt-pages/user-profile.html'> <span><i
                                class='flaticon-gear mr-2'></i> 修改注册信息</span> </a>
                    </li>
                    <li class='dropdown-divider'></li>
                    <li class='dropdown-menu-footer'>
                        <a class='media fs-14 p-2' href='../prebuilt-pages/lock-screen.html'> <span><i
                                class='flaticon-security mr-2'></i> 锁定</span> </a>
                    </li>
                    <li class='dropdown-menu-footer'>
                        <a class='media fs-14 p-2' href='../prebuilt-pages/default-login.html'> <span><i
                                class='flaticon-shut-down mr-2'></i> 登出</span> </a>
                    </li>
                </ul>
            </li>
        </ul>
        <div class='ms-toggler ms-d-block-sm pr-0 ms-nav-toggler' data-toggle='slideDown' data-target='#ms-nav-options'>
            <span class='ms-toggler-bar bg-white'></span>
            <span class='ms-toggler-bar bg-white'></span>
            <span class='ms-toggler-bar bg-white'></span>
        </div>
    </nav>
    <!-- Body Content Wrapper -->
    <div class="ms-content-wrapper">
        <div class="row">
            <!-- Notifications Widgets -->

            <div class="col-xl-3 col-md-6 col-sm-6">
                <a href="#">
                    <div class="ms-card card-gradient-custom ms-widget ms-infographics-widget ms-p-relative">
                        <div class="ms-card-body media">
                            <div class="media-body">
                                <h6>我的预约</h6>
                                <p class="ms-card-change"> 12</p>
                            </div>
                        </div>
                        <i class="far fa-check-square ms-icon-mr"></i>
                    </div>
                </a>
            </div>
            <div class="col-xl-3 col-md-6 col-sm-6">
                <a href="#">
                    <div class="ms-card card-gradient-custom ms-widget ms-infographics-widget ms-p-relative">
                        <div class="ms-card-body media">
                            <div class="media-body">
                                <h6>我的患者</h6>
                                <p class="ms-card-change"> 32</p>
                            </div>
                        </div>
                        <i class="fas fa-user ms-icon-mr"></i>
                    </div>
                </a>
            </div>


            <!--            <div class="col-xl-6 col-md-12">-->
            <!--                <div class="ms-panel">-->
            <!--                    <div class="ms-panel-header">-->
            <!--                        <h6>病人总数</h6>-->
            <!--                    </div>-->
            <!--                    <div class="ms-panel-body">-->
            <!--                        <canvas id="line-chart"></canvas>-->
            <!--                    </div>-->
            <!--                </div>-->
            <!--            </div>-->


            <!--            <div class="col-xl-6 col-md-12">-->
            <!--                <div class="ms-panel">-->
            <!--                    <div class="ms-panel-header">-->
            <!--                        <h6>住院病人</h6>-->
            <!--                    </div>-->
            <!--                    <div class="ms-panel-body">-->
            <!--                        <canvas id="bar-chart-grouped"></canvas>-->
            <!--                    </div>-->
            <!--                </div>-->
            <!--            </div>-->


            <!--            <div class="col-xl-6 col-lg-12">-->
            <!--                <div class="ms-panel ms-panel-fh ms-facebook-engagements">-->
            <!--                    <div class="ms-panel-header">-->
            <!--                        <h6>医生预约</h6>-->
            <!--                    </div>-->
            <!--                    <div class="ms-panel-body p-0">-->
            <!--                        <div class="ms-facebook-page-selection">-->
            <!--                            <p class="ms-text-dark">2020年1月25日至2020年2月02日</p>-->
            <!--                            <p>2020年1月18日至2020年2月24日（前）</p>-->

            <!--                            <div class="dropdown">-->
            <!--                                <a href="#" class="has-chevron" data-toggle="dropdown" aria-haspopup="true"-->
            <!--                                   aria-expanded="false">选择医生</a>-->
            <!--                                <ul class="dropdown-menu">-->
            <!--                                    <li class="ms-dropdown-list">-->
            <!--                                        <a class="media p-2" href="#">-->
            <!--                                            <div class="media-body">-->
            <!--                                                <span>乔丹</span>-->
            <!--                                            </div>-->
            <!--                                        </a>-->
            <!--                                        <a class="media p-2" href="#">-->
            <!--                                            <div class="media-body">-->
            <!--                                                <span>约翰东</span>-->
            <!--                                            </div>-->
            <!--                                        </a>-->
            <!--                                        <a class="media p-2" href="#">-->
            <!--                                            <div class="media-body">-->
            <!--                                                <span>爱德华</span>-->
            <!--                                            </div>-->
            <!--                                        </a>-->
            <!--                                    </li>-->
            <!--                                </ul>-->
            <!--                            </div>-->
            <!--                        </div>-->
            <!--                        <ul class="ms-list clearfix">-->
            <!--                            <li class="ms-list-item">-->
            <!--                                <div class="d-flex justify-content-between align-items-end">-->
            <!--                                    <div class="ms-graph-meta">-->
            <!--                                        <h2>工作日预约</h2>-->
            <!--                                        <p class="ms-text-dark">45.07%</p>-->
            <!--                                        <p class="ms-text-success">+28.44%</p>-->
            <!--                                        <p>VS 66.68% (上月)</p>-->
            <!--                                    </div>-->
            <!--                                    <div class="ms-graph-canvas">-->
            <!--                                        <canvas id="engaged-users"></canvas>-->
            <!--                                    </div>-->
            <!--                                </div>-->
            <!--                            </li>-->
            <!--                            <li class="ms-list-item">-->
            <!--                                <div class="d-flex justify-content-between align-items-end">-->
            <!--                                    <div class="ms-graph-meta">-->
            <!--                                        <h2>Weekend Engagement</h2>-->
            <!--                                        <p class="ms-text-dark">90.07%</p>-->
            <!--                                        <p class="ms-text-success">+90.44%</p>-->
            <!--                                        <p>VS 66.68% (上月)</p>-->
            <!--                                    </div>-->
            <!--                                    <div class="ms-graph-canvas">-->
            <!--                                        <canvas id="page-impressions"></canvas>-->
            <!--                                    </div>-->
            <!--                                </div>-->
            <!--                            </li>-->
            <!--                        </ul>-->
            <!--                    </div>-->
            <!--                </div>-->
            <!--            </div>-->


        </div>
        <div class="row">
            <div class="col-md-18">

                <div class="ms-panel">
                    <div class="ms-panel-header ms-panel-custome">
                        <h6>我的预约清单</h6>
                    </div>
                    <div class="ms-panel-body">
                        <div class="table-responsive">
                            <div id="data-table-2_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <table id="aptable" class="table w-100 thead-primary dataTable no-footer" role="grid" style="width: 1588px;">
                                            <thead>
                                            <tr role="row">
                                                <th style="width: 118px;">ID</th>
                                                <th style="width: 190px;">患者姓名</th>
                                                <th style="width: 83px;">年龄</th>
                                                <th style="width: 134px;">医生姓名</th>
                                                <th style="width: 101px;">科室</th>
                                                <th style="width: 140px;">预约日期</th>
                                                <th style="width: 209px;">预约时间</th>
                                                <th style="width: 127px;">症状</th>
                                                <th style="width: 127px;">状态</th>
                                                <th style="width: 108px;">操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr role="row" class="odd" v-for="(appointment,index) in this.appointments" >
                                                <td v-html="index+1" >APT0001</td>
                                                <td v-html="appointment.name"><img src="../../assets/img/dashboard/patient-1.jpg">张飞</td>
                                                <td v-html="appointment.age">39</td>
                                                <td v-html="appointment.doctorName">澜</td>
                                                <td v-html="appointment.departmentName">内科</td>
                                                <td v-html="appointment.date">2019年11月</td>
                                                <td v-html="appointment.time">10:00am-12:00am</td>
                                                <td v-html="appointment.description">伤风感冒</td>
                                                <td v-html="appointment.description">
                                                    <span id="green_status" class="badge badge-outline-success" >未处理</span><!--green-->
                                                    <span id="red_status" class="badge badge-outline-danger" >已处理</span><!--red-->
                                                </td>
                                                <td >
<!--                                                    <button class="btn-primary  w-20" type="button">确认处理</button>-->
                                                    <p>-</p>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12 col-md-7">
                                        <div class="dataTables_paginate paging_simple_numbers" id="aptable_paginate">
                                            <ul class="pagination has-gap">
                                                <li class="paginate_button page-item " id="aptable_上一页" >
                                                    <a href="#" aria-controls="aptable"
                                                       class="page-item page-link" @click="loadAppointments(pageInfo.prePage)">上一页</a>
                                                </li>
                                                <li class="paginate_button page-item " v-for="n in pageInfo.navigatepageNums">
                                                    <a href="" aria-controls="aptable" data-dt-idx="1" tabindex="0"
                                                       class="page-link"  v-on:click.prevent="loadAppointments(n)"
                                                       v-bind:class="{'bg-secondary text-light':n==pageInfo.pageNum}" v-text="n">1</a>
                                                </li>
                                                <li class="paginate_button page-item " id="aptable_下一页">
                                                    <a href="#" aria-controls="aptable" data-dt-idx="3" tabindex="0"
                                                       class="page-item page-link" @click.prevent="loadAppointments(pageInfo.nextPage)">下一页</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<!-- MODALS -->
<!-- Reminder Modal -->
<script src="assets/reuseCode/reminderModal.js"></script>
<!-- Notes Modal -->
<script src="assets/reuseCode/notesModal.js"></script>
<!--复用代码:3个 modal-->
<script src="assets/reuseCode/modal.js"></script>

<!-- SCRIPTS -->
<!-- Global Required Scripts Start -->
<script src="assets/js/jquery-3.3.1.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/perfect-scrollbar.js"></script>
<script src="assets/js/jquery-ui.min.js"></script>

<!-- Global Required Scripts End -->
<script src="assets/js/d3.v3.min.js"></script>
<script src="assets/js/topojson.v1.min.js"></script>
<script src="assets/js/datamaps.all.min.js"></script>


<!-- Page Specific Scripts Start -->
<script src="assets/js/slick.min.js"></script>
<script src="assets/js/moment.js"></script>
<script src="assets/js/jquery.webticker.min.js"></script>
<script src="assets/js/Chart.bundle.min.js"></script>
<script src="assets/js/index-chart.js"></script>

<!-- Page Specific Scripts Finish -->
<script src="assets/js/calendar.js"></script>
<!-- mednalytics core JavaScript -->
<script src="assets/js/framework.js"></script>
<!-- Settings -->
<script src="assets/js/settings.js"></script>
<script src="assets/js/index/index.js"></script>
</body>

</html>
